<template>
    <el-container class="app">
        <el-header @click="select=false">
            <headers></headers>
        </el-header>
        <el-container class="app-container">
            <el-main @click="select=false">
                <render v-model="data" :loading="loading" :device="device" v-model:select="select"
                :origin="origin" :AccessToken="AccessToken" :cookie="cookie"/>
            </el-main>
            <el-aside>
                <asides></asides>
            </el-aside>
        </el-container>
    </el-container>
</template>
<script setup lang="ts">
import { reactive, provide } from 'vue';
import headers from './components/header/index.vue'
import asides from './components/aside/index.vue'
import render from '@dashboard/render/src/index.vue'
import {data,device,loading,select,draggable,origin,AccessToken,cookie} from '@drag/store'
draggable.value = true;
const eventBus = reactive({
  events: {},
  emit(event) {
    if (this.events[event]) {
        let args = [...arguments];
        args.splice(0,1);
        this.events[event].forEach(callback => callback(...args));
    }
  },
  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  },
  off(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback);
    }
  }
});
provide('eventBus', eventBus);
</script>
<style scoped>
.app{
    height: 100%;
}
.el-header{
    background-color:#f4f9ff;
    border-bottom: 1px solid #d8d8d8;
    border-top: 1px dashed #e1e1e1;
    height: 45px;
    padding: 0;
}
.app-container{
    height: calc(100% - 45px);
}
.el-main{
    padding: 0;
    height: 100%;
    overflow: hidden;
}
.el-aside{
    background: white;width:260px;
    border-left: 1px solid #d8d8d8;
}
</style>